<!--<template>-->
<!--  <div ref="canvas"></div>-->
<!--</template>-->

<!--<script lang="ts" setup>-->
<!--import * as THREE from "three";-->
<!--import Stats from "three/examples/jsm/libs/stats.module";-->
<!--import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";-->
<!--import { ref, onMounted } from "vue";-->
<!--import {initCamera, initDefaultLighting, initStat, initWebGLRenderer, setRandomColors} from "@/book/ThreeUtils";-->
<!--import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";-->

<!--const canvas = ref<any>();-->

<!--const scene = new THREE.Scene();-->

<!--const renderer = initWebGLRenderer(undefined);-->

<!--const stat = initStat(undefined);-->

<!--const camera = initCamera(undefined);-->
<!--camera.position.set(0, 15, 70);-->

<!--initDefaultLighting(scene, undefined);-->

<!--const orbitControl = new OrbitControls(camera, renderer.domElement);-->
<!--orbitControl.update();-->

<!--// THREE.AnimationClip：当一个具有动画数据的模型被加载后，获得的模型对象往往具有一个名为animations的成员对象。-->
<!--// 该对象包含了一个THREE.AnimationClip对象集合。一个模型所包含的THREE.AnimationClip对象通常保存有某种特定类型的动画数据，或者是该模型能够执行的某种动作。-->
<!--// 比如当加载了一个鸟模型时，它可能包含了两个THREE.AnimationClip对象，一个保存了拍打翅膀的动作，而另一个保存了张嘴闭嘴的动作。-->
<!--// THREE.AnimationMixer：THREE.AnimationMixer对象用于控制多个THREE.AnimationClip对象，确保这些动画在适当的时间发生，使动画同步或者控制从一个动画过渡到另一个。-->
<!--// THREE.AnimationAction：当向THREE.AnimationMixer对象添加一个THREE.AnimationClip对象时，调用者会获得一个THREE.AnimationAction。-->
<!--//     很多动画控制功能是通过THREE.AnimationAction来调用的，而THREE.AnimationMixer本身并没有提供很全面的控制接口。除了初次添加动画之外，-->
<!--//     THREE.AnimationAction对象也可以随时从THREE.AnimationMixer获取-->
<!--let mixer = null;-->
<!--let clipAction = null;-->
<!--let frameMesh = null;-->
<!--let mesh = null;-->

<!--const loader = new THREE.ObjectLoader();-->
<!--loader.load(-->
<!--    new URL("@/assets/models/horse/horse.js", import.meta.url).href,-->
<!--    (object) => {-->
<!--      const { geometry, material } = object;-->
<!--      geometry.computeVertexNormals();-->
<!--      geometry.computeMorphNormals();-->

<!--      const mat = new THREE.MeshLambertMaterial();-->
<!--      mat.vertexColors = true;-->

<!--      mesh = new THREE.Mesh(geometry, mat);-->
<!--      mesh.scale.set(0.15,0.15,0.15);-->
<!--      mesh.translateY(-10);-->
<!--      mesh.translateX(10);-->

<!--      mixer = new THREE.AnimationMixer( mesh );-->

<!--      const animationClip = geometry.animations[0]-->
<!--      clipAction = mixer.clipAction( animationClip ).play();-->

<!--      clipAction.setLoop(THREE.LoopRepeat);-->
<!--      scene.add(mesh)-->
<!--    },-->
<!--    (e) => {-->
<!--      console.log(' loader.load onProgress ', e, '\r\n ', ( e.loaded / e.total * 100 ) + '% loaded');-->
<!--    },-->
<!--    (err) => {-->
<!--      console.error(' loader.load onError ', err);-->
<!--    }-->
<!--);-->


<!--</script>-->
